<template>
  <div :class="real_them">
    <homeDragbtn class="Dragbtn" 
    @handlepaly="handleaudioplay" style="cursor:pointer;"
    />
    <MenuVue />
    <div class="main">
      <Blog_listVue  :class="this.$store.state.blog_list" />
      <Blog_mainVue   :class="this.$store.state.blog_context" />
      <Blog_jsVue class="blog_tools" />
    </div>
    <Form />
  </div>
</template>

<script>
  
import homeDragbtn from "../re_components/homeDragbtn.vue";
import Blog_listVue from "../components/Blog_list.vue";
import Blog_jsVue from "../components/Blog_js.vue";
import Blog_mainVue from "../components/Blog_main.vue";
import MenuVue from "../components/Menu.vue";
import Form from "../re_components/Form.vue";
export default {
  name: "Blog",
  components: {homeDragbtn, Blog_listVue, Blog_jsVue, Blog_mainVue, MenuVue, Form },
  data() {
    return {
      them: "contain",
    };
  },
  computed: {
    real_them() {
      let k = this.$store.state.skin;
      let m = k == true ? "light" : "dark";
      return this.them + " " + m;
    },
  },
  mounted() {
    let userinfo = JSON.parse(sessionStorage.getItem("userinfo"))
    if (userinfo) {
      this.$store.commit("tologin", true);
      this.$store.commit("addInfomation", userinfo);
      console.log(userinfo)
    }
  },
  methods:{
    closeLogin(){
      this.$store.commit("changeshow", false)
    },
    handleaudioplay() {
      if(this.$store.state.blog_list == "blog_lists"){
        this.$store.state.blog_list = "blog_list"
      }else if(this.$store.state.blog_list == "blog_list"){
        this.$store.state.blog_list = "blog_lists"
      }
      if(this.$store.state.blog_context =='blog_contexts'){
        this.$store.state.blog_context ='blog_context'
      }else if(
        this.$store.state.blog_context =='blog_context'
      ){
        this.$store.state.blog_context ='blog_contexts'
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import "../main.less";

.light {
  background-color: @bg_gray;
  transition: all 1s;
  .menu {
    background-color: @bg_light_contain;
    color: @fs_light_contain;
    transition: all 1s;
  }
  .main {
    .blog_list {
      background-color: @bg_light_contain;
      color: @fs_light_contain;
      transition: all 1s;
    }
    .blog_context {
      background-color: @bg_light_contain;
      color: @fs_light_contain;
      transition: all 1s;
    }
    .blog_tools {
      background-color: @bg_light_contain;
      color: @fs_light_contain;
      transition: all 1s;
    }
  }
}
.dark {
  background-color: @bg_dark;
  transition: all 1s;
  .menu {
    background-color: @bg_dark_contain;
    color: @fs_dark_contain;
    transition: all 1s;
  }
  .main {
    .blog_list {
      background-color: @bg_dark_contain;
      color: @fs_dark_contain;
      transition: all 1s;
    }
    .blog_context {
      background-color: @bg_dark_contain;
      color: @fs_dark_contain;
      transition: all 1s;
    }
    .blog_tools {
      background-color: @bg_dark_contain;
      color: @fs_dark_contain;
      transition: all 1s;
    }
  }
}
.contain {
  // 博客是单屏页面
  height: 100%;
  width: 100%;
  position: relative;
  .main {
    position: absolute;
    bottom: 0;
    height: 90%;
    width: 100%;
  }
}

@media screen and (min-width: 1300px) {
  /* 大于1200px时 */
  .contain {
    .Dragbtn{
        display:none;
      }
    .main {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .blog_list {
        width: 25%;
        height: 100%;
        margin-left: 16px;
      }
      
      .blog_context {
        width: 750px;
        height: 100%;
        margin-left: 16px;
      }
      .blog_tools {
        flex-grow: 1;
        height: 100%;
        margin-left: 16px;
        margin-right: 16px;
      }
    }
  }
}

@media screen and (min-width: 800px) and (max-width: 1400px) {
  /* 小于800px时 */

  .contain {
    .Dragbtn{
        display:none;
      }
    .main {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .blog_list {
        flex-grow: 1;
        height: 100%;
        margin-left: 16px;  
      }
      
      .blog_context {
        min-width: 750px;
        height: 100%;
        margin-left: 16px;
        margin-right: 16px;
      }
      .blog_tools {
        display: none;
      }
    }
  }
}

@media screen and (max-width: 800px) {
  /* 小于800px时 */

  .contain {
    .Dragbtn{
        display: block;

      }
    .main {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .blog_list {
        display: none;
      }
      .blog_list {
        display: block;
      }
      .blog_contexts{
        display: none;
      }
      .blog_context {
        min-width: 100%;
        height: 100%;
        margin-left: 16px;
        margin-right: 16px;
      }
      .blog_tools {
        display: none;
      }
    }
  }
}
</style>